<template>
    <h1 >个人主页</h1>
    <el-button type="primary" class="back" @click="router.push('/home')">返回</el-button>
      <el-row :gutter="5">
       <el-col :span="10">
      
         <el-card shadow="hover" class="grid-content ep-bg-purple left" >
          <img :src="userImgUrl+userinfo.userimg" alt="" class="infoimg">
          <el-button class="xiugaitouxiang" @click="updateUserImg">修改头像</el-button>
         </el-card>
       </el-col>
       <el-col :span="14"> 
         <el-card shadow="hover" class="right">
             <li><span class="r-txt">用户名:</span><span class="txt">{{ userinfo.username }}</span></li>
             <li><span  class="r-txt">密 码:</span><span  class="txt">{{ userinfo.password }}</span></li>
             <li><span  class="r-txt">手机号:</span><span  class="txt">{{ userinfo.phone }}</span></li>
             <li><span  class="r-txt">角 色:</span><span class="txt">{{ userinfo.role }}</span></li>
             <el-button @click="updateUser" class="xiugaiuser">修改资料</el-button>
         </el-card>
       </el-col>
     </el-row>
</template>

<script setup lang="ts">
import {useStore} from 'vuex'
import { ref,onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import {userImgUrl} from '@/config/imgconfig'
const router = useRouter()
const store = useStore()
const userinfo =ref({
    username:'',
    password:'',
    userimg:'',
    phone:'',
    role:''
})
onMounted(()=>{
  userinfo.value.username = store.state.userinfo.username;
  userinfo.value.password = store.state.userinfo.password;
  userinfo.value.userimg = store.state.userinfo.userimg;
  userinfo.value.phone = store.state.userinfo.phone;
  userinfo.value.role = store.state.userinfo.role;
})

//修改资料
const updateUser=()=>{
    //获取vuex中的username或者userid，然后修改
    updateUserMsg()
}
//修改头像
const updateUserImg=()=>{
    updateUserImgMsg()
}

const updateUserMsg = ()=>{ElMessage({'message':'修改资料接口未开发',type:'warning'})}

const updateUserImgMsg = ()=>{ElMessage({'message':'修改头像接口未开发',type:'warning'})}

</script>


<style lang="less" scoped>

li{
    list-style:none;
}

.left{
    width:600px;
    height: 600px;
    background-color: rgb(243, 255, 253);
    text-align: center;
.infoimg{
    width:300px;
    height: 300px;
    border-radius: 50%;
    background-color: rgb(255, 255, 255);
    margin-left: 50px;
}
.xiugaitouxiang{
   margin-top: 150px;
 //  margin-right: 200px;
  position: relative;
  right: 190px;
  width:200px;
  height: 50px;
}
}

.right{
    width:850px;
    height: 600px;
    background-color: rgb(228, 247, 255);
    padding-top: 30px;
    .r-txt{
        font-size: 15px;
        font-weight: 700;
    }
    .txt{
        margin-left: 30px;
    }
    li{
        width:400px;
        height: 100px;
       // background-color: rgb(180, 228, 255);
        margin-bottom: 10px;
        margin-left: 100px;
       // text-align: center;
        line-height: 100px;
    }
    .xiugaiuser{
        width:200px;
        height: 50px;
        margin-left: 200px;
    }
}
.back{
  position: relative;
  bottom: 50px;
  left:1400px;
}
</style>